<template>
  <div class="tool">
    <h3>转账工具</h3>
    <ul>
        <li v-for="v in arr" :key="v.id">
            <img :src="v.imgs">
            <p>{{v.title}}</p>
        </li>
    </ul>
  </div>
</template>

<script>
export default {
    data(){
        return {
            arr:[
                {id:2210,"title":"二维码转账","imgs":require("@/assets/index/tool/tool-0.jpg")},
                {id:2211,"title":"批量转账","imgs":require("@/assets/index/tool/tool-1.jpg")},
                {id:2212,"title":"AA收款","imgs":require("@/assets/index/tool/tool-2.jpg")},
                {id:2213,"title":"他行转入","imgs":require("@/assets/index/tool/tool-3.jpg")},
                {id:2214,"title":"公益捐款","imgs":require("@/assets/index/tool/tool-4.jpg")},
                {id:2215,"title":"撤销转账","imgs":require("@/assets/index/tool/tool-5.jpg")},
                {id:2216,"title":"境内外币转账","imgs":require("@/assets/index/tool/tool-6.jpg")},
                {id:2217,"title":"转账设置","imgs":require("@/assets/index/tool/tool-7.jpg")},
                {id:2218,"title":"跨行资金归集","imgs":require("@/assets/index/tool/tool-8.jpg")},
                {id:2219,"title":"消费贷款转存","imgs":require("@/assets/index/tool/tool-9.jpg")}
            ]
        }
    }

}
</script>

<style lang="scss" scoped>
    .tool {
        width: 90%;
        margin: auto;
        margin-top: .2rem;
        ul {
            width: 100%;
            height: 2.6rem;
            margin-top: .3rem;
            display: flex;
            flex-wrap: wrap;
            // justify-content: space-between;
            align-content: space-between;
            li {
                width: 25%;
                display: flex;
                flex-direction: column;
                align-items: center;
                p {
                    font-size: .12rem;
                    margin-top:.1rem ;
                }
            }
        }
    }

</style>